i18n คืออะไร ทำเว็บรองรับหลายภาษาอย่างมืออาชีพ

i18n คืออะไร

i18n ย่อมาจากคำว่า Internationalization หมายถึงกระบวนการออกแบบและพัฒนา เว็บไซต์หรือซอฟต์แวร์ให้รองรับได้หลายภาษา โดยไม่ต้องแก้ไขโค้ดทุกครั้งที่ต้องการเพิ่มภาษาใหม่ แต่ใช้วิธีแยกข้อความ คำอธิบาย ป้ายเมนู และเนื้อหาต่างๆ ออกจากโค้ดโปรแกรมไปไว้ในไฟล์ภาษาแทน

การทำ i18n จึงเป็นพื้นฐานสำคัญของเว็บไซต์ยุคใหม่ที่ต้องการให้ผู้ใช้งานจากหลายประเทศสามารถเข้าถึงเนื้อหาได้ในภาษาของตนเอง เช่น เว็บไซต์บริษัท เว็บบริการออนไลน์ เว็บแอปพลิเคชัน และแพลตฟอร์ม SaaS ต่างๆ

ที่มาของคำว่า i18n ทำไมต้องมีเลข 18 ตรงกลาง

คำว่า Internationalization มีตัวอักษรทั้งหมด 20 ตัว โดยมีตัวแรกคือ i และตัวสุดท้ายคือ n ส่วนตัวอักษรระหว่างกลางมีทั้งหมด 18 ตัว จึงถูกย่อให้กลายเป็นรูปแบบ i18n (อ่านว่า ไอ-เอธทีน-เอ็น)

รูปแบบการย่อคำแบบนี้นิยมใช้ในสายงานไอที เช่น

• i18n = Internationalization (การรองรับหลายภาษา)
• l10n = Localization (การปรับเนื้อหาให้เข้ากับท้องถิ่น)
• g11n = Globalization (การออกแบบให้รองรับการใช้งานระดับโลก)

ความแตกต่างระหว่าง i18n และ l10n

หลายคนมักสับสนระหว่างคำว่า i18n และ l10n ซึ่งจริงๆ แล้วทั้งสองอย่างนี้เกี่ยวข้องกันแต่คนละขั้นตอน

• i18n (Internationalization) คือ การออกแบบโครงสร้างระบบและโค้ดให้รองรับหลายภาษา เช่น การแยกข้อความออกจากโค้ด รองรับฟอนต์หลายภาษาหรือหลายสคริปต์ การจัดการรูปแบบวันที่ เวลา และสกุลเงิน
• l10n (Localization) คือ การนำระบบที่รองรับหลายภาษาอยู่แล้ว มาปรับให้ตรงกับ วัฒนธรรมและบริบทของแต่ละประเทศ เช่น การใช้รูปแบบวันที่แบบไทย พ.ศ. การแสดงราคาเป็นสกุลเงินบาท หรือการใช้ตัวอย่างเนื้อหาที่ใกล้เคียงกับผู้ใช้ในประเทศนั้น

สรุปง่ายๆ คือ i18n คือการเตรียมระบบ ส่วน l10n คือการลงรายละเอียดให้เหมาะกับแต่ละพื้นที่

ทำไมเว็บไซต์ยุคใหม่ต้องรองรับ i18n

การทำเว็บไซต์รองรับหลายภาษาไม่ใช่เรื่องของภาพลักษณ์เพียงอย่างเดียว แต่เกี่ยวข้องกับธุรกิจโดยตรง โดยเฉพาะเว็บไซต์ที่ต้องการเติบโตสู่ระดับสากล จุดเด่นหลักของการใช้ i18n ได้แก่

• เข้าถึงผู้ใช้งานได้มากขึ้น รองรับผู้ใช้จากหลายประเทศ หลายภูมิภาค เพิ่มโอกาสขยายตลาด
• แยกเนื้อหาออกจากโค้ด ทำให้นักพัฒนาโฟกัสที่โค้ด นักแปลโฟกัสที่ภาษา ลดความเสี่ยงจากการแก้โค้ดผิดจุด
• จัดการภาษาได้เป็นระบบ เพิ่มภาษา ลบภาษา หรือแก้ไขคำแปลได้จากไฟล์หรือระบบจัดการภาษาเพียงจุดเดียว
• รองรับรูปแบบตามท้องถิ่น เช่น วันที่ เวลา สกุลเงิน รูปแบบตัวเลข หรือรูปแบบการเขียนที่ต่างกัน
• ช่วยเรื่อง SEO ระหว่างประเทศ เว็บไซต์หลายภาษาที่จัดโครงสร้างดีจะมีโอกาสติดอันดับค้นหาในประเทศต่างๆ ได้ง่ายขึ้น

แนวทางการออกแบบระบบ i18n ที่ดี

หากต้องการออกแบบระบบให้รองรับ i18n อย่างมืออาชีพ ควรพิจารณาแนวทางต่อไปนี้

• แยกข้อความทั้งหมดออกจากโค้ด ไม่เขียนข้อความภาษาในไฟล์โค้ดตรงๆ แต่เก็บในไฟล์ภาษา เช่น JSON, YAML, หรือฐานข้อมูล
• ใช้ key แทนข้อความจริง เช่น "HOME_TITLE" แทนการเขียน "หน้าหลัก" หรือ "Home" ในโค้ด
• รองรับตัวแปรในข้อความ เช่น ชื่อผู้ใช้ จำนวนสินค้า หรือค่าตัวเลขอื่นๆ
• รองรับการจัดเรียงคำที่ต่างกันในแต่ละภาษา โดยใช้ placeholder หรือฟังก์ชันจัดรูปแบบข้อความ
• เตรียมรองรับภาษาเขียนจากขวาไปซ้าย เช่น ภาษาอาหรับ หรือภาษาฮีบรู หากมีแผนรองรับในอนาคต

ตัวอย่างโครงสร้างไฟล์ภาษาแบบ i18n

ตัวอย่างการเก็บข้อความในรูปแบบไฟล์ JSON แยกตามภาษา เช่น ภาษาอังกฤษและภาษาไทย

ไฟล์ภาษาอังกฤษ en.json

{
  "hello": "Hello",
  "welcome": "Welcome to our website",
  "login_button": "Log in",
  "register_button": "Sign up"
}

ไฟล์ภาษาไทย th.json

{
  "hello": "สวัสดี",
  "welcome": "ยินดีต้อนรับสู่เว็บไซต์ของเรา",
  "login_button": "เข้าสู่ระบบ",
  "register_button": "สมัครสมาชิก"
}

จากนั้นในโค้ด ไม่ว่าจะใช้เฟรมเวิร์กใด เช่น Vue React หรือ Next.js มักจะเรียกข้อความด้วยฟังก์ชันคล้ายๆ กัน เช่น

t("hello")
t("welcome")
t("login_button")

ระบบ i18n จะทำการเลือกข้อความจากไฟล์ภาษาที่ผู้ใช้ตั้งค่าไว้โดยอัตโนมัติ เช่น หากเลือกภาษาไทย ก็จะแสดงเป็น “สวัสดี” แทน “Hello”

ตัวอย่างการใช้งาน i18n ในเฟรมเวิร์กยอดนิยม

ในโลกของการพัฒนาเว็บสมัยใหม่ มีไลบรารีและปลั๊กอินสำหรับ i18n ให้เลือกใช้มากมาย ตัวอย่างเช่น

• Vue I18n สำหรับโปรเจกต์ที่ใช้ Vue.js
• React i18next สำหรับโปรเจกต์ที่ใช้ React
• Next.js i18n สำหรับเว็บที่ใช้ Next.js และรองรับการแยกภาษาในระดับหน้าเพจ
• Nuxt i18n สำหรับผู้ที่ใช้ Nuxt ในฝั่ง Vue

แต่ละเครื่องมือจะมีวิธีตั้งค่าและใช้งานแตกต่างกันเล็กน้อย แต่หลักคิดพื้นฐานยังเหมือนกันคือ แยกข้อความออกจากโค้ด และเลือกใช้ตามภาษาของผู้ใช้

สิ่งที่ควรระวังเมื่อทำ i18n

แม้การทำ i18n จะช่วยให้เว็บไซต์รองรับหลายภาษาได้ดีขึ้น แต่ก็มีข้อควรระวังที่มักพบเจอ เช่น

• การลืมแยกข้อความบางส่วน เช่น ข้อความในปุ่มเล็กๆ ข้อความแจ้งเตือน หรือข้อความ error ที่ยังฝังอยู่ในโค้ด
• การใช้ key ไม่เป็นระบบ เช่น ใช้ key สั้นๆ ที่ไม่บอกความหมาย ทำให้จัดการยากในระยะยาว
• การจัดรูปแบบวันที่และเวลา ที่ไม่รองรับ Timezone หรือรูปแบบของประเทศต่างๆ
• การตัดคำในภาษาไทย ที่อาจต้องใช้ไลบรารีช่วยหรือตรวจสอบการแสดงผลจริงบนหน้าเว็บ

สรุป i18n สำหรับนักพัฒนาเว็บ

i18n คือเครื่องมือและแนวคิดในการทำให้เว็บไซต์รองรับหลายภาษาได้อย่างยืดหยุ่น โดยอาศัยการแยกข้อความออกจากโค้ด จัดเก็บไว้ในไฟล์ภาษา และใช้ฟังก์ชันดึงข้อความตามภาษาที่กำหนด หากคุณกำลังพัฒนาเว็บไซต์ที่มีเป้าหมายผู้ใช้มากกว่าหนึ่งประเทศ การวางโครงสร้าง i18n ตั้งแต่แรกเริ่มจะช่วยประหยัดเวลา ลดความซ้ำซ้อน และรองรับการขยายตัวของธุรกิจในอนาคตได้เป็นอย่างดี